<template>
    <div class="star" :class="starType">
       <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
    </div>
</template>

<script>
  const LENGTH=5;
  const CLS_ON='on';
  const CLS_HALF='half';
  const CLS_OFF='off';
    export default {
        name: "star",
      props:{
          size:{
            type:Number
          },
         score:{
            type:Number
         }
      },
 computed:{
   starType(){
     return 'star-'+this.size;
   },
   itemClasses(){
     let result=[];
     let scrore=Math.floor(this.score*2)/2;

     let hasDecimal=scrore%1!==0;
     let integer= Math.floor(scrore);
      for(let i=0;i<integer;i++){
        result.push(CLS_ON);
      }
      if(hasDecimal){
        result.push(CLS_HALF);
      }
      while (result.length<LENGTH){
        result.push(CLS_OFF);
      }

      return result;

   }
 }
    }
</script>

<style lang="less" scoped>

.star{
  font-size: 0;
  .star-item{
     display: inline-block;
     background-repeat: no-repeat;
  }
     &.star-48{
         .star-item{
            width: 20px;
            height: 20px;
            margin-right: 22px;
            background-size: 20px 20px;
            &:last-child{
              margin-right: 0;
            }
            &.on{
              background-image: url("../../components/star/star48_on@2x.png");
              @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
                background-image: url("../../components/star/star48_on@3x.png");
              }
            }
            &.half{
              background-image: url("../../components/star/star48_half@2x.png");
              @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
                background-image: url("../../components/star/star48_half@3x.png");
              }
            }
           &.off{
             background-image: url("../../components/star/star48_off@2x.png");
             @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
               background-image: url("../../components/star/star48_off@3x.png");
             }
           }
         }
     }
  &.star-36{
    .star-item{
      width: 15px;
      height: 15px;
      margin-right: 16px;
      background-size: 15px 15px;
      &:last-child{
        margin-right: 0;
      }
      &.on{
        background-image: url("../../components/star/star36_on@2x.png");
        @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
          background-image: url("../../components/star/star36_on@3x.png");
        }
      }
      &.half{
        background-image: url("../../components/star/star36_half@2x.png");
        @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
          background-image: url("../../components/star/star36_half@3x.png");
        }
      }
      &.off{
        background-image: url("../../components/star/star36_off@2x.png");
        @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
          background-image: url("../../components/star/star36_off@3x.png");
        }
      }
    }
  }
  &.star-24{
    .star-item{
      width: 10px;
      height: 10px;
      margin-right: 3px;
      background-size: 10px 10px;
      &:last-child{
        margin-right: 0;
      }
      &.on{
        background-image: url("../../components/star/star24_on@2x.png");
        @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
          background-image: url("../../components/star/star24_on@3x.png");
        }
      }
      &.half{
        background-image: url("../../components/star/star24_half@2x.png");
        @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
          background-image: url("../../components/star/star24_half@3x.png");
        }
      }
      &.off{
        background-image: url("../../components/star/star24_off@2x.png");
        @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
          background-image: url("../../components/star/star24_off@3x.png");
        }
      }
    }
  }

}
</style>
